var host = "http://localhost:8080";
var key = false;
$(function () {
	$(".login_content span").click(function (e) {
		if ($(this).hasClass("active")) {
			return;
		}
		//指终止事件内容从里到外进行 
		e.stopPropagation();
		$(this).removeClass("back");
		$(this).removeClass("unactive");
		$(this).addClass("active");
		if ($(this).text() == "Username") {
			$("#username").focus();
		}
		else if ($(this).text() == "Password") {
			$("#password").focus();
		}
		//$(".login_content").addClass("testStyle");
	})
	$(".login_content input").click(function (e) {
		e.stopPropagation();
	})
	document.onclick = function (e) {
		//$(".login_content").removeClass("testStyle");
		if ($("#username").val() != null && $("#username").val() != "") {
			//	alert($("#username").val());
			return;
		}
		if ($("#password").val() != null && $("#password").val() != "") {
			//	alert($("#username").val());
			return;
		}


		if ($("#userspan").hasClass("active")) {
			$("#userspan").removeClass("active");
			$("#userspan").addClass("back");
		}
		if ($("#passspan").hasClass("active")) {
			$("#passspan").removeClass("active");
			$("#passspan").addClass("back");
		}

	}


})

$(function () {
	const slideEl = document.querySelector('#slider');
	var key = false;
	var halfkey = false;
	var done = false;
	slideEl.addEventListener("mouseup", () => {
		if (done == true) {
			slideEl.value = 100;
			return;
		}
		if (key == false || halfkey == false) slideEl.value = 0;
		key = true;

	})
	slideEl.addEventListener("mousedown", () => {
		if (done == true) {
			slideEl.value = 100;
			return
		}
		if (slideEl.value == 0) {
			key = true;

		}


	})
	slideEl.addEventListener("mouseup", () => {
		key = false;
		halfkey = false;

	})
	//添加滑动监听事件
	slideEl.addEventListener("mousemove", () => {
		//进行中点端的判定
		if (slideEl.value <= 60 && slideEl.value >= 40) halfkey = true;
		//只有滑动到末尾同时中点判定通过时，验证通过
		//同时进行前端样式转换

		if (key == true && halfkey == true && slideEl.value == 100) {
			done = true;
			$("#slider").css("background", "greenyellow");
			$("#slider").css("box-shadow", "none");
			$("#slider_label").show();
		}
	})

});
function login() {
	const slideEl = document.querySelector('#slider')
	if (slideEl.value != 100) {
		html = "<p>" + "没有通过滑动验证。" + "</p>"
		window_append(html);
		return;
	}
	html = "<p>" + "正在登录" + "</p>";
	window_append(html);
	var formData = new FormData();
	var username = $("#username").val();
	var password = $("#password").val();
	// if(username.length<12||password.length<12){

	// }
	formData.append("username", username);
	formData.append("password", password);
	console.log(key);
	//登录走这条
	if (key == false) {
		$.ajax({
			url: "/pipi/userlogin",
			type: "post",
			data: formData,
			processData: false,
			contentType: false,
			success: function (res) {
				if (res != "-1") {
					setCookie("username", res, "d10");
					//alert(getCookie("username"));
					html = "<p>" + "登陆成功" + "</p>";
					window_append(html);
					href = host + "/pipi/home/" + res;
					setTimeout(() => {
						$("#tip_close_button").click();
					}, 1000)
					setTimeout(() => {
						$(".login_title").hide();
						$(".login_content").hide();
						$(".login_window").addClass("login_window_close");
					}, 2000)

					setTimeout("goto(href)", 3300);
				}
				// window.location.href=host+"/pipi/home/"+res;
				else {
					html = "<p>" + "密码错误或用户不存在。" + "</p>"
					window_append(html);
				}
			}
		})
	}
	//注册走这条
	else if (key == true) {

		$.ajax({
			url: "/pipi/register",
			type: "post",
			data: formData,
			processData: false,
			contentType: false,
			success: function (res) {

				if (res != "000") {
					setCookie("username", res, "d10");

					html = "<p>" + "登陆成功" + "</p>";
					window_append(html);
					href = host + "/pipi/home/" + res;
					setTimeout(() => {
						$("#tip_close_button").click();
					}, 1000)
					setTimeout(() => {
						$(".login_title").hide();
						$(".login_content").hide();
						$(".login_window").addClass("login_window_close");
					}, 2000)

					setTimeout("goto(href)", 3300);
				}
				// window.location.href=host+"/pipi/home/"+res;
				else {
					html = "<p>" + "用户已存在。" + "</p>"
					window_append(html);
				}
			}
		})

	}

}
function setCookie(name, value, time) {
	var strsec = getsec(time);
	var exp = new Date();
	exp.setTime(exp.getTime() + strsec * 1);
	document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function delCookie(name) {
	var exp = new Date();
	exp.setTime(exp.getTime() - 1);
	var cval = getCookie(name);
	if (cval != null)
		document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
	var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

	if (arr = document.cookie.match(reg))

		return unescape(arr[2]);
	else
		return null;
}
function getsec(str) {
	var str1 = str.substring(1, str.length);
	var str2 = str.substring(0, 1);
	if (str2 == "s") {
		return str1 * 1000;
	}
	else if (str2 == "h") {
		return str1 * 60 * 60 * 1000;
	}
	else if (str2 == "d") {
		return str1 * 24 * 60 * 60 * 1000;
	}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30

function login_ani() {
	$("#login_ani").text("");
	$("#login_ani").unbind();
	$("#login_ani").removeClass("login_ani.hover");
	setTimeout("show2()", 200);
	setTimeout("show()", 950);
	setTimeout("show1('#userdiv')", 1150);
	setTimeout("show1('#passdiv')", 1350);
	setTimeout("show1('#sliderdiv')", 1550);
	setTimeout("show1('#buttonidv')", 1750);
}
function show2() {
	$(".login_ani").addClass("login_ani_extra");
}
function show() {
	$(".login_window").show();
	$(".login_ani").hide();
}
function show1(val) {
	$(val).show();
}
$(function () {
	$("#login_ani").mouseover(function () {
		$("#login_ani").text("GO!!");
	})

	$("#login_ani").mouseout(function () {
		$("#login_ani").text("GO");
		console.log("hide")
	})

})
function window_append(html) {
	$("#tip_close_content").empty();
	$("#tip_window").show();
	$("#tip_close_content").append(html);
}
function goto(href) {
	window.location.href = href;
}
function objremove(obj, cl) {
	$(obj).removeClass(cl);
}

function to_register() {

	if (key == false) {
		key = true;
		//input
		$(".inputdiv input").removeClass("input_red");
		$(".inputdiv input").addClass("input_blue");
		//button
		$("#login_button").removeClass("login_button_red");
		$("#login_button").addClass("login_button_blue");
		//content
		$(".login_content").addClass("changemodel_content");
		setTimeout(() => {
			$(".login_content").removeClass("changemodel_content");
		}, 3000);
		//	
		$(".login_change").addClass("changemodel");
		setTimeout(() => {
			$(".login_change").removeClass("changemodel");
			$(".login_change").css("background", "blue");
			$(".login_change").css("background-image", "linear-gradient(to right, blue , rgba(255, 0, 0, 0.6))");
		}, 3000);
		setTimeout(() => {
			$(".login_change").text("login");
		}, 1500);
		// titile
		$(".login_title").addClass("changemodel_title");
		setTimeout(() => {
			$(".login_title").removeClass("changemodel_title");
			$(".login_title").css("color", "blue");
			$(".login_title").css("border-bottom", " blue solid 4px");
		}, 3000);
		setTimeout(() => {
			$(".login_title").text("Register");
		}, 1500);
		//copy
		$(".login_window_copy").show();
		$(".login_window_copy").addClass("copy_show");
		setTimeout(() => {
			$(".login_window_copy").removeClass("copy_show");
			//	$(".login_window_copy").hide();
		}, 3000);
	} else if (key == true) {
		key = false;
		//input
		$(".inputdiv input").removeClass("input_blue");
		$(".inputdiv input").addClass("input_red");
		//button
		$("#login_button").removeClass("login_button_blue");
		$("#login_button").addClass("login_button_red");
		//content
		$(".login_content").addClass("changemodel_content");
		setTimeout(() => {
			$(".login_content").removeClass("changemodel_content");
		}, 3000);
		//
		$(".login_change").addClass("changemodel2");
		setTimeout(() => {
			$(".login_change").removeClass("changemodel2");
			$(".login_change").css("background", "red");
			$(".login_change").css("background-image", "linear-gradient(to right, red ,rgba(0, 0, 255, 0.6))");
		}, 3000);
		setTimeout(() => {
			$(".login_change").text("register");
		}, 1500);
		//title
		$(".login_title").addClass("changemodel2_title");
		setTimeout(() => {
			$(".login_title").removeClass("changemodel2_title");
			$(".login_title").css("color", "red");
			$(".login_title").css("border-bottom", " red solid 4px");
		}, 3000);
		setTimeout(() => {
			$(".login_title").text("Login");
		}, 1500);
		//copy
		//$(".login_window_copy").show();
		$(".login_window_copy").addClass("copy_display");
		setTimeout(() => {
			$(".login_window_copy").removeClass("copy_display");
			$(".login_window_copy").hide();
		}, 3000);
	}

}